.page {
	background-color: #fff;
	min-height: 100vh;
}

.student {
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}
}

.sample {
	margin-bottom: 30rpx;

	&-scroll {
		white-space: nowrap;

		&-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 10rpx;
			display: flex;
			align-items: center;

			&-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
				margin-right: 20rpx;

				&.active {
					border: 1px dashed $u-error;

					.img {
						transform: scale(1.1);
					}

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.img {
					width: 256rpx;
					height: 256rpx;
					margin-bottom: 30rpx;
				}

				.name {
					font-size: 28rpx;
				}
			}
		}
	}
}

.compare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30rpx;

	&-list {
		display: flex;
		align-items: center;

		.compare-img {
			width: 256rpx;
			height: 256rpx;
			margin-right: 20rpx;
		}
	}

	&-add {
		width: 256rpx;
		height: 256rpx;
		border: 2rpx dashed $u-border-color;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.result-list {
	display: flex;
	flex-direction: column;
	font-size: 32rpx;
}
